<template>
  <div class='my-pic'>
    <img :src="userInfo.pic" alt="pic">
    <p class="white-space" :title="userInfo.name">{{userInfo.name}}</p>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      userInfo:{
        pic: require('../../assets/images/menu/my_user.jpg'),
        name:'糖糖'
      }
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.my-pic {
  height: 180px;
  padding-top: 40px;
  box-sizing: border-box;
  text-align: center;

  img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
  }
  p{
    line-height: 32px;
  }
}
</style>
